<template>
    <div class="propertyRight" style="margin-bottom: 50px;">
      <div class="list-box" v-for="(item,index) in list" @mouseenter="hoverIndex = index" @mouseleave="hoverIndex = null" :class="{'hover-effect': hoverIndex === index}">
        <div class="box">
          <div class="box-left">{{item.no}}</div>
          <div class="box-right">
            <div class="box-right-title">{{ item.title }}</div>
            <div class="box-right-content">{{ item.content }}</div>
            <div class="box-right-link"><a style="text-align: right;margin-right: 12px;" @click="handClick(item)">{{ item.link }}</a></div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
    name: 'propertyRight',
    data() {
        return {
          list: [
            {
              title: '知识产权侵权查询',
              content: '知识产权侵权查询是指对侵犯专利权、商标权、著作权等知识产权的行为进行调查和处理的过程。通过侵权查询，可以及时发现并制止侵权行为，保护企业的合法权益。',
              link: '去查询',
              type:'equity',
              no:"01",
            },
            {
              title: '报关退税',
              content: '报关退税是指出口企业将货物出口后，向海关申报并申请退还其在国内采购货物时已缴纳的增值税和消费税。报关退税可以降低出口企业的成本，提高其国际竞争力。',
              link: '去退税',
              type:'taxation',
              no:"02",
            },
            {
              title: '一件代发',
              content: '一件代发是指消费者在电商平台上下单后，由商家直接从供应商处采购商品并发货给消费者。这种方式可以减少库存压力，提高资金周转效率，同时保证商品的新鲜度和质量。',
              link: '去代发',
              type:'behalf',
              no:"03",
            },
            {
              title: '跨境回款',
              content: '跨境回款是指企业通过跨境电商平台销售商品后，从海外买家处收到款项的过程。跨境回款通常涉及外汇兑换和国际支付，需要处理不同国家和地区的支付方式和法律法规。',
              link: '去回款',
              type:'refund',
              no:"04",
            },
          ],
          hoverIndex: null
        }
    },
    mounted() {
    },
    methods: {
      handClick(){

      }
    }
}
</script>
<style scoped>
.list-box {
    border: 1px solid #888888;
    border-radius: 12px;
    width: 100%;
    margin-top: 20px;
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    height: 135px;
    background-color: #fff; /* Default background color */
}
.list-box.hover-effect {
    transform: scale(1.05);
    border: 1px solid var(--color-base);
    background-color: rgba(255, 255, 255, 0.9); /* Slightly different color on hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Shadow on hover */
}
.list-box:focus, .list-box.hover-effect {
    outline: none; /* Remove default outline */
    border: 1px solid var(--color-base); /* Maintain border change on focus */
}

.box{
  display: flex;
  align-items: center;
  margin: 10px 20px;
  position: relative;
  overflow: visible;
}

.box-left {
  width: 100px;
  font-size: 50px;
  color: var(--color-base);
  font-weight: bold;
  display: flex;
  align-items: center; 
  justify-content: center; 
}

.box-right-title{
  width: 1058px;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 12px;
}
.box-right-content{
  font-size:16px;
  color: var(--color-font);
  margin-bottom: 12px;
}
.box-right-link a {
  text-decoration: none;
  color: var(--color-base);
  transition: text-decoration 0.3s ease-in-out, text-underline-offset 0.3s ease-in-out;
}

.box-right-link a:hover {
  text-decoration: underline;
  text-underline-offset: 4px; /* 设置横线与文字的距离为4px */
}
.box-right-link{
  font-size: 16px;
  text-align: right;
  color: var(--color-base);
  cursor: pointer;
}
</style>